<!doctype html>
<html lang="zh-Hans">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<meta name="hugo-theme" content="Axiom 0.7.1">



  <link rel="icon" type="image/png" sizes="32x32" href="/blog/">
  <link rel="icon" type="image/x-icon" href="/blog/">
  <link rel="apple-touch-icon" href="/blog/">
  <link rel="canonical" href="https://Mia-zhao.github.io/blog/posts/html%E5%B8%B8%E7%94%A8%E6%A0%87%E7%AD%BE/">
<link rel="preload" as="style" href="/blog/bundle.css?v=1598028633" media="all">
<link rel="stylesheet" href="/blog/bundle.css?v=1598028633" media="all">
<style>.cdata pre{color:#edf2f7;background-color:#2d3748}.cdata :not(pre)>code{color:#805ad5;background-color:#f7fafc}.chroma .err{color:#fed7d7;background-color:#9b2c2c}.chroma .hl{background-color:#4a5568}.chroma .ln{color:#a0aec0}.chroma .k,.chroma .kc,.chroma .kd,.chroma .kn,.chroma .kp,.chroma .kr{color:#63b3ed}.chroma .kt{color:#b794f4}.chroma .na{color:#f6e05e}.chroma .nb{color:#f6ad55}.chroma .nc{color:#fc8181}.chroma .no{color:#68d391}.chroma .nd{color:#fc8181}.chroma .ne{color:#fc8181}.chroma .nf{color:#f6ad55}.chroma .nt{color:#fc8181}.chroma .l{color:#b794f4}.chroma .dl,.chroma .ld,.chroma .s,.chroma .s2,.chroma .sa,.chroma .sb,.chroma .sc,.chroma .sd{color:#68d391}.chroma .se{color:#a0aec0}.chroma .s1,.chroma .sh,.chroma .si,.chroma .sr,.chroma .ss,.chroma .sx{color:#68d391}.chroma .il,.chroma .m,.chroma .mb,.chroma .mf,.chroma .mh,.chroma .mi,.chroma .mo{color:#b794f4}.chroma .o,.chroma .ow{color:#90cdf4}.chroma .p{color:#cbd5e0}.chroma .c,.chroma .c1,.chroma .ch,.chroma .cm,.chroma .cp,.chroma .cpf,.chroma .cs{color:#a0aec0}.chroma .ge{font-style:italic}.chroma .gs{font-weight:700}</style>

<link rel="preload" as="image" href="/blog/images/Cover1.jpg">

<title>HTML常用标签 : Mia&#39;s Blog Posts</title>

<meta property="og:title" content="HTML常用标签">
<meta property="og:site_name" content="Mia&#39;s Blog Posts">
<meta property="og:url" content="https://Mia-zhao.github.io/blog/posts/html%E5%B8%B8%E7%94%A8%E6%A0%87%E7%AD%BE/">
<link rel="image_src" href="https://Mia-zhao.github.io/blog/images/Cover1.jpg">
<meta property="og:image" content="https://Mia-zhao.github.io/blog/images/Cover1.jpg">
<meta property="og:image:width" content="">
<meta property="og:image:height" content="">
<meta property="og:type" content="article">
<meta property="og:locale" content="zh_Hans">
<meta property="og:description" content="这篇博文主要为了个人学习目的。此篇总结了HTML常用标签: a img table form 注意：应用网址浏览方式打开html文件，例如：利用工具http-server,parcel,etc. 1. &amp;lt;a&amp;gt;标签 作用 又称anchor (锚)，用于创建超链接。按功能分，可以通向： 同页面的其他元素 其他网页 文件 JavaScript 电子邮件/电话 以上功能通过元素的href属性达成，例如： &amp;lt;!&amp;ndash; example 1 链接通向同页面的id=&amp;quot;hey&amp;quot;的p元素 &amp;ndash;&amp;gt;&amp;lt;p id=&amp;quot;hey&amp;quot;&amp;gt;&amp;lt;a href=&amp;quot;#hey&amp;quot;&amp;gt;example 1&amp;lt;/a&amp;gt;&amp;lt;!&amp;ndash; example 2 链接通向无协议的google.com, https://google.com或者http://google.com也是合法值&amp;ndash;&amp;gt;&amp;lt;a href=&amp;quot;//google.com&amp;quot;&amp;gt;example 2&amp;lt;/a&amp;gt;&amp;lt;!&amp;ndash; example 3 链接通向文件路径, &amp;quot;subdir1/subdir2&amp;quot;等效，也可以是&amp;quot;index.html&amp;quot;, &amp;quot;./index.html&amp;quot;等效 &amp;ndash;&amp;gt;&amp;lt;a href=&amp;quot;/subdir1/subdir2&amp;quot;&amp;gt;example 3&amp;lt;/a&amp;gt;&amp;lt;!&amp;ndash; example 4 链接运行javascript代码&amp;lt;code&amp;gt;部分，如果是空则什么都不做 (不需要刷新的时候用) &amp;ndash;&amp;gt;&amp;lt;a href=&amp;quot;javascript:&amp;lt;code&amp;gt;;&amp;quot;&amp;gt;example 4&amp;lt;/a&amp;gt;&amp;lt;!&amp;ndash; example 5 链接发送邮件，&amp;quot;tel:110&amp;quot;则拨电话 &amp;ndash;&amp;gt;&amp;lt;a href=&amp;quot;mailto:abc@example.com&amp;quot;&amp;gt;example 5&amp;lt;/a&amp;gt;target属性 默认值是_self, 表明链接在&amp;lt;a&amp;gt;所在窗口打开。其他值包括： _blank: 在新窗口打开，在新tab或是window打开取决于浏览器设置 _parent: 在&amp;lt;a&amp;gt;的父级元素环境打开，若无父级元素，效果等同_self _top: 在&amp;lt;a&amp;gt;的最高祖先级元素环境打开，若无，则等同_self &amp;quot;some_value&amp;quot;: 任意String。若&amp;quot;some_value&amp;quot;窗口已存在，则在其窗口打开；否则新建一个&amp;quot;some_value&amp;quot;窗口并在此打开链接 download属性 指示浏览器下载，可以有值或者没有值：">
<meta name="description" content="这篇博文主要为了个人学习目的。此篇总结了HTML常用标签: a img table form 注意：应用网址浏览方式打开html文件，例如：利用工具http-server,parcel,etc. 1. &amp;lt;a&amp;gt;标签 作用 又称anchor (锚)，用于创建超链接。按功能分，可以通向： 同页面的其他元素 其他网页 文件 JavaScript 电子邮件/电话 以上功能通过元素的href属性达成，例如： &amp;lt;!&amp;ndash; example 1 链接通向同页面的id=&amp;quot;hey&amp;quot;的p元素 &amp;ndash;&amp;gt;&amp;lt;p id=&amp;quot;hey&amp;quot;&amp;gt;&amp;lt;a href=&amp;quot;#hey&amp;quot;&amp;gt;example 1&amp;lt;/a&amp;gt;&amp;lt;!&amp;ndash; example 2 链接通向无协议的google.com, https://google.com或者http://google.com也是合法值&amp;ndash;&amp;gt;&amp;lt;a href=&amp;quot;//google.com&amp;quot;&amp;gt;example 2&amp;lt;/a&amp;gt;&amp;lt;!&amp;ndash; example 3 链接通向文件路径, &amp;quot;subdir1/subdir2&amp;quot;等效，也可以是&amp;quot;index.html&amp;quot;, &amp;quot;./index.html&amp;quot;等效 &amp;ndash;&amp;gt;&amp;lt;a href=&amp;quot;/subdir1/subdir2&amp;quot;&amp;gt;example 3&amp;lt;/a&amp;gt;&amp;lt;!&amp;ndash; example 4 链接运行javascript代码&amp;lt;code&amp;gt;部分，如果是空则什么都不做 (不需要刷新的时候用) &amp;ndash;&amp;gt;&amp;lt;a href=&amp;quot;javascript:&amp;lt;code&amp;gt;;&amp;quot;&amp;gt;example 4&amp;lt;/a&amp;gt;&amp;lt;!&amp;ndash; example 5 链接发送邮件，&amp;quot;tel:110&amp;quot;则拨电话 &amp;ndash;&amp;gt;&amp;lt;a href=&amp;quot;mailto:abc@example.com&amp;quot;&amp;gt;example 5&amp;lt;/a&amp;gt;target属性 默认值是_self, 表明链接在&amp;lt;a&amp;gt;所在窗口打开。其他值包括： _blank: 在新窗口打开，在新tab或是window打开取决于浏览器设置 _parent: 在&amp;lt;a&amp;gt;的父级元素环境打开，若无父级元素，效果等同_self _top: 在&amp;lt;a&amp;gt;的最高祖先级元素环境打开，若无，则等同_self &amp;quot;some_value&amp;quot;: 任意String。若&amp;quot;some_value&amp;quot;窗口已存在，则在其窗口打开；否则新建一个&amp;quot;some_value&amp;quot;窗口并在此打开链接 download属性 指示浏览器下载，可以有值或者没有值：">
<meta property="og:updated_time" content="2020-08-03T13:00:00Z">
<meta property="fb:app_id" content="">
<meta name="author" content="Mia Zhao">
<meta property="article:author" content="https://Mia-zhao.github.io/blog/">
<meta property="article:published_time" content="2020-08-03T13:00:00Z">
<meta property="article:modified_time" content="2020-08-03T13:00:00Z">
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "HTML常用标签",
  "alternativeHeadline": "这篇博文主要为了个人学习目的。此篇总结了HTML常用标签: a img table form 注意：应用网址浏览方式打开html文件，例如：利用工具http-server,parcel,etc. 1. \u0026lt;a\u0026gt;标签 作用 又称anchor (锚)，用于创建超链接。按功能分，可以通向： 同页面的其他元素 其他网页 文件 JavaScript 电子邮件/电话 以上功能通过元素的href属性达成，例如： \u0026lt;!\u0026ndash; example 1 链接通向同页面的id=\u0026quot;hey\u0026quot;的p元素 \u0026ndash;\u0026gt;\r\u0026lt;p id=\u0026quot;hey\u0026quot;\u0026gt;\r\u0026lt;a href=\u0026quot;#hey\u0026quot;\u0026gt;example 1\u0026lt;/a\u0026gt;\r\u0026lt;!\u0026ndash; example 2 链接通向无协议的google.com, https://google.com或者http://google.com也是合法值\u0026ndash;\u0026gt;\r\u0026lt;a href=\u0026quot;//google.com\u0026quot;\u0026gt;example 2\u0026lt;/a\u0026gt;\r\u0026lt;!\u0026ndash; example 3 链接通向文件路径, \u0026quot;subdir1/subdir2\u0026quot;等效，也可以是\u0026quot;index.html\u0026quot;, \u0026quot;./index.html\u0026quot;等效 \u0026ndash;\u0026gt;\r\u0026lt;a href=\u0026quot;/subdir1/subdir2\u0026quot;\u0026gt;example 3\u0026lt;/a\u0026gt;\r\u0026lt;!\u0026ndash; example 4 链接运行javascript代码\u0026lt;code\u0026gt;部分，如果是空则什么都不做 (不需要刷新的时候用) \u0026ndash;\u0026gt;\r\u0026lt;a href=\u0026quot;javascript:\u0026lt;code\u0026gt;;\u0026quot;\u0026gt;example 4\u0026lt;/a\u0026gt;\r\u0026lt;!\u0026ndash; example 5 链接发送邮件，\u0026quot;tel:110\u0026quot;则拨电话 \u0026ndash;\u0026gt;\r\u0026lt;a href=\u0026quot;mailto:abc@example.com\u0026quot;\u0026gt;example 5\u0026lt;/a\u0026gt;\rtarget属性 默认值是_self, 表明链接在\u0026lt;a\u0026gt;所在窗口打开。其他值包括： _blank: 在新窗口打开，在新tab或是window打开取决于浏览器设置 _parent: 在\u0026lt;a\u0026gt;的父级元素环境打开，若无父级元素，效果等同_self _top: 在\u0026lt;a\u0026gt;的最高祖先级元素环境打开，若无，则等同_self \u0026quot;some_value\u0026quot;: 任意String。若\u0026quot;some_value\u0026quot;窗口已存在，则在其窗口打开；否则新建一个\u0026quot;some_value\u0026quot;窗口并在此打开链接 download属性 指示浏览器下载，可以有值或者没有值：",
  "url": "https://Mia-zhao.github.io/blog/posts/html%E5%B8%B8%E7%94%A8%E6%A0%87%E7%AD%BE/",
  "image": "https://Mia-zhao.github.io/blog/images/Cover1.jpg",
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "https://Mia-zhao.github.io/blog/posts/html%E5%B8%B8%E7%94%A8%E6%A0%87%E7%AD%BE/"
  },
  "description": "这篇博文主要为了个人学习目的。此篇总结了HTML常用标签: a img table form 注意：应用网址浏览方式打开html文件，例如：利用工具http-server,parcel,etc. 1. \u0026lt;a\u0026gt;标签 作用 又称anchor (锚)，用于创建超链接。按功能分，可以通向： 同页面的其他元素 其他网页 文件 JavaScript 电子邮件/电话 以上功能通过元素的href属性达成，例如： \u0026lt;!\u0026ndash; example 1 链接通向同页面的id=\u0026quot;hey\u0026quot;的p元素 \u0026ndash;\u0026gt;\r\u0026lt;p id=\u0026quot;hey\u0026quot;\u0026gt;\r\u0026lt;a href=\u0026quot;#hey\u0026quot;\u0026gt;example 1\u0026lt;/a\u0026gt;\r\u0026lt;!\u0026ndash; example 2 链接通向无协议的google.com, https://google.com或者http://google.com也是合法值\u0026ndash;\u0026gt;\r\u0026lt;a href=\u0026quot;//google.com\u0026quot;\u0026gt;example 2\u0026lt;/a\u0026gt;\r\u0026lt;!\u0026ndash; example 3 链接通向文件路径, \u0026quot;subdir1/subdir2\u0026quot;等效，也可以是\u0026quot;index.html\u0026quot;, \u0026quot;./index.html\u0026quot;等效 \u0026ndash;\u0026gt;\r\u0026lt;a href=\u0026quot;/subdir1/subdir2\u0026quot;\u0026gt;example 3\u0026lt;/a\u0026gt;\r\u0026lt;!\u0026ndash; example 4 链接运行javascript代码\u0026lt;code\u0026gt;部分，如果是空则什么都不做 (不需要刷新的时候用) \u0026ndash;\u0026gt;\r\u0026lt;a href=\u0026quot;javascript:\u0026lt;code\u0026gt;;\u0026quot;\u0026gt;example 4\u0026lt;/a\u0026gt;\r\u0026lt;!\u0026ndash; example 5 链接发送邮件，\u0026quot;tel:110\u0026quot;则拨电话 \u0026ndash;\u0026gt;\r\u0026lt;a href=\u0026quot;mailto:abc@example.com\u0026quot;\u0026gt;example 5\u0026lt;/a\u0026gt;\rtarget属性 默认值是_self, 表明链接在\u0026lt;a\u0026gt;所在窗口打开。其他值包括： _blank: 在新窗口打开，在新tab或是window打开取决于浏览器设置 _parent: 在\u0026lt;a\u0026gt;的父级元素环境打开，若无父级元素，效果等同_self _top: 在\u0026lt;a\u0026gt;的最高祖先级元素环境打开，若无，则等同_self \u0026quot;some_value\u0026quot;: 任意String。若\u0026quot;some_value\u0026quot;窗口已存在，则在其窗口打开；否则新建一个\u0026quot;some_value\u0026quot;窗口并在此打开链接 download属性 指示浏览器下载，可以有值或者没有值：",
  "author": {
    "@type": "Person",
    "name": "Mia Zhao"
  },
  "publisher": {
    "@type": "Organization",
    "name": "Mia's Blog Posts",
    "logo": {
      "@type": "ImageObject",
      "url": "https://Mia-zhao.github.io/blog/"
    }
  },
  "datePublished": "2020-08-03T13:00:00Z",
  "dateModified": "2020-08-03T13:00:00Z",
  "articleBody": "\u003cp\u003e这篇博文主要为了个人学习目的。此篇总结了HTML常用标签:\u003c/p\u003e\n\u003col\u003e\n\u003cli\u003e\u003ccode\u003ea\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003eimg\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003etable\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003eform\u003c/code\u003e\u003c/li\u003e\n\u003c/ol\u003e\n\u003cp\u003e\u003cem\u003e注意：应用网址浏览方式打开html文件，例如：利用工具http-server,parcel,etc.\u003c/em\u003e\u003c/p\u003e\n\u003ch2 id=\"1-a标签\"\u003e1. \u0026lt;a\u0026gt;标签\u003c/h2\u003e\n\u003ch3 id=\"作用\"\u003e作用\u003c/h3\u003e\n\u003cp\u003e又称anchor (锚)，用于创建超链接。按功能分，可以通向：\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e同页面的其他元素\u003c/li\u003e\n\u003cli\u003e其他网页\u003c/li\u003e\n\u003cli\u003e文件\u003c/li\u003e\n\u003cli\u003eJavaScript\u003c/li\u003e\n\u003cli\u003e电子邮件/电话\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003e以上功能通过元素的\u003ccode\u003ehref\u003c/code\u003e属性达成，例如：\u003c/p\u003e\n\u003cpre\u003e\u003ccode\u003e\u0026lt;!-- example 1 链接通向同页面的id=\u0026quot;hey\u0026quot;的p元素 --\u0026gt;\r\n\u0026lt;p id=\u0026quot;hey\u0026quot;\u0026gt;\r\n\u0026lt;a href=\u0026quot;#hey\u0026quot;\u0026gt;example 1\u0026lt;/a\u0026gt;\r\n\r\n\u0026lt;!-- example 2 链接通向无协议的google.com, https://google.com或者http://google.com也是合法值--\u0026gt;\r\n\u0026lt;a href=\u0026quot;//google.com\u0026quot;\u0026gt;example 2\u0026lt;/a\u0026gt;\r\n\r\n\u0026lt;!-- example 3 链接通向文件路径, \u0026quot;subdir1/subdir2\u0026quot;等效，也可以是\u0026quot;index.html\u0026quot;, \u0026quot;./index.html\u0026quot;等效 --\u0026gt;\r\n\u0026lt;a href=\u0026quot;/subdir1/subdir2\u0026quot;\u0026gt;example 3\u0026lt;/a\u0026gt;\r\n\r\n\u0026lt;!-- example 4 链接运行javascript代码\u0026lt;code\u0026gt;部分，如果是空则什么都不做 (不需要刷新的时候用) --\u0026gt;\r\n\u0026lt;a href=\u0026quot;javascript:\u0026lt;code\u0026gt;;\u0026quot;\u0026gt;example 4\u0026lt;/a\u0026gt;\r\n\r\n\u0026lt;!-- example 5 链接发送邮件，\u0026quot;tel:110\u0026quot;则拨电话 --\u0026gt;\r\n\u0026lt;a href=\u0026quot;mailto:abc@example.com\u0026quot;\u0026gt;example 5\u0026lt;/a\u0026gt;\r\n\u003c/code\u003e\u003c/pre\u003e\u003ch3 id=\"target属性\"\u003e\u003ccode\u003etarget\u003c/code\u003e属性\u003c/h3\u003e\n\u003cp\u003e默认值是\u003ccode\u003e_self\u003c/code\u003e, 表明链接在\u003ccode\u003e\u0026lt;a\u0026gt;\u003c/code\u003e所在窗口打开。其他值包括：\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ccode\u003e_blank\u003c/code\u003e: 在新窗口打开，在新tab或是window打开取决于浏览器设置\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e_parent\u003c/code\u003e: 在\u003ccode\u003e\u0026lt;a\u0026gt;\u003c/code\u003e的父级元素环境打开，若无父级元素，效果等同\u003ccode\u003e_self\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e_top\u003c/code\u003e: 在\u003ccode\u003e\u0026lt;a\u0026gt;\u003c/code\u003e的最高祖先级元素环境打开，若无，则等同\u003ccode\u003e_self\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e\u0026quot;some_value\u0026quot;\u003c/code\u003e: 任意String。若\u003ccode\u003e\u0026quot;some_value\u0026quot;\u003c/code\u003e窗口已存在，则在其窗口打开；否则新建一个\u003ccode\u003e\u0026quot;some_value\u0026quot;\u003c/code\u003e窗口并在此打开链接\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch3 id=\"download属性\"\u003e\u003ccode\u003edownload\u003c/code\u003e属性\u003c/h3\u003e\n\u003cp\u003e指示浏览器下载，可以有值或者没有值：\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e有值：作为下载文件名\u003c/li\u003e\n\u003cli\u003e无值：浏览器提出文件名\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch3 id=\"rel属性\"\u003e\u003ccode\u003erel\u003c/code\u003e属性\u003c/h3\u003e\n\u003cp\u003e代表链接对象的关系，用空格分隔的\u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types\"\u003eLink Type\u003c/a\u003e表示\u003c/p\u003e\n\u003ch2 id=\"2-img标签\"\u003e2. \u0026lt;img\u0026gt;标签\u003c/h2\u003e\n\u003cp\u003e关键词：\u003cem\u003eget request\u003c/em\u003e, \u003cem\u003ealt\u003c/em\u003e, \u003cem\u003esrc\u003c/em\u003e, \u003cem\u003e响应式\u003c/em\u003e\u003cbr\u003e\n\u003cbr\u003e\n\u003ccode\u003e\u0026lt;img\u0026gt;\u003c/code\u003e的功能是将图片嵌入在文本里。以下是重要属性：\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ccode\u003esrc\u003c/code\u003e: 必须有的，提供图片路径\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003ealt\u003c/code\u003e: 提供图片文本描述，不是强制属性但是有用且建议。若图片加载失败，此属性能提供具体图片信息\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003eheight\u003c/code\u003e/\u003ccode\u003ewidth\u003c/code\u003e: 提供任意一个，另一个相适应\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003e重要事件：\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ccode\u003eonload\u003c/code\u003e: 加载成功事件\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003eonerror\u003c/code\u003e: 加载失败事件，在此加error handling\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003e重要样式：\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e响应式(电脑，移动设备屏等)用 \u003ccode\u003emax-width: 100%\u003c/code\u003e\n以下是用法：\u003c/li\u003e\n\u003c/ul\u003e\n\u003cpre\u003e\u003ccode\u003e\u0026lt;!-- 用法一：style  --\u0026gt;\r\n\u0026lt;style\u0026gt;\r\n  img {\r\n      max-width: 100%;\r\n  }\r\n\u0026lt;/style\u0026gt;\r\n\r\n\u0026lt;!-- 用法二：sizes  --\u0026gt;\r\n\u0026lt;img src=\u0026quot;/path/to/image\u0026quot; alt=\u0026quot;description\u0026quot; sizes=\u0026quot;(max-width: 100%)\u0026quot; \u0026gt;\r\n\u003c/code\u003e\u003c/pre\u003e\u003ch2 id=\"3-table标签\"\u003e3. \u0026lt;table\u0026gt;标签\u003c/h2\u003e\n\u003cp\u003e\u003ccode\u003etable\u003c/code\u003e结构：\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ccode\u003e\u0026lt;thead\u0026gt;\u003c/code\u003e/\u003ccode\u003e\u0026lt;tbody\u0026gt;\u003c/code\u003e/\u003ccode\u003e\u0026lt;tfoot\u0026gt;\u003c/code\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ccode\u003e\u0026lt;tr\u0026gt;\u003c/code\u003e (row)\n\u003cul\u003e\n\u003cli\u003e\u003ccode\u003e\u0026lt;th\u0026gt;\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e\u0026lt;td\u0026gt;\u003c/code\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003e\u003ccode\u003etable\u003c/code\u003e样式：\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ccode\u003etable-layout\u003c/code\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ccode\u003e\u0026quot;auto\u0026quot;\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e\u0026quot;fixed\u0026quot;\u003c/code\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003eborder-collapse\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003eborder-spacing\u003c/code\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"4-form标签\"\u003e4. \u0026lt;form\u0026gt;标签\u003c/h2\u003e\n\u003cp\u003e关键词：\u003cem\u003eget/post\u003c/em\u003e, \u003cem\u003eaction\u003c/em\u003e, \u003cem\u003eonsubmit\u003c/em\u003e, \u003cem\u003einput\u003c/em\u003e\u003cbr\u003e\n\u003cbr\u003e\n\u003ccode\u003e\u0026lt;form\u0026gt;\u003c/code\u003e表示用来提交信息的交互式控制组件。重要属性包括：\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ccode\u003eaction\u003c/code\u003e: 处理提交的URL (后端)\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003emethod\u003c/code\u003e: (不区分大小写)\n\u003cul\u003e\n\u003cli\u003e\u003ccode\u003e\u0026quot;POST\u0026quot;\u003c/code\u003e: 数据通过\u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/API/Body\"\u003erequest body\u003c/a\u003e发送\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e\u0026quot;GET\u0026quot;\u003c/code\u003e: 数据附加在\u003ccode\u003eaction\u003c/code\u003eURL中\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e\u0026quot;DIALOG\u0026quot;\u003c/code\u003e: 在\u003ccode\u003e\u0026lt;dialog\u0026gt;\u003c/code\u003e中提交表示关闭对话框\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003eautocomplete\u003c/code\u003e (\u003ccode\u003e\u0026quot;on\u0026quot;\u003c/code\u003e/\u003ccode\u003e\u0026quot;off\u0026quot;\u003c/code\u003e)\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003etarget\u003c/code\u003e: 同\u003ccode\u003e\u0026lt;a\u0026gt;\u003c/code\u003e的\u003ccode\u003etarget\u003c/code\u003e属性\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003e重要事件：\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ccode\u003eonsubmit\u003c/code\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003e\u003cstrong\u003e注意\u003c/strong\u003e:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ccode\u003e\u0026lt;form\u0026gt;\u003c/code\u003e包含\u003ccode\u003einput\u003c/code\u003e/\u003ccode\u003ebutton\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003e\u0026lt;form\u0026gt;\u003c/code\u003e里必须有一个\u003ccode\u003etype\u003c/code\u003e \u003ccode\u003e\u0026quot;submit\u0026quot;\u003c/code\u003e, 如果\u003ccode\u003etype\u003c/code\u003e没有标明，默认为\u003ccode\u003e\u0026quot;submit\u0026quot;\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003einput\u003c/code\u003e (\u003ccode\u003etype=\u0026quot;submit\u0026quot;\u003c/code\u003e) vs \u003ccode\u003ebutton\u003c/code\u003e (\u003ccode\u003etype=\u0026quot;submit\u0026quot;\u003c/code\u003e)\n\u003cul\u003e\n\u003cli\u003e\u003ccode\u003ebutton\u003c/code\u003e可以用标签包裹内容, \u003ccode\u003einput\u003c/code\u003e不可以\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003e一个\u003ccode\u003e\u0026lt;form\u0026gt;\u003c/code\u003e例子：\u003c/p\u003e\n\u003cpre\u003e\u003ccode\u003e\u0026lt;!-- 自动补全功能只有input name存在时才有用 --\u0026gt;\r\n\u0026lt;form action=\u0026quot;\u0026quot; method=\u0026quot;POST\u0026quot; autocomplete=\u0026quot;on\u0026quot;\u0026gt;\r\n  \u0026lt;input name=\u0026quot;username\u0026quot; type=\u0026quot;text\u0026quot;/\u0026gt;\r\n  \u0026lt;input type=\u0026quot;submit\u0026quot; /\u0026gt;\r\n\u0026lt;/form\u0026gt;\r\n\u003c/code\u003e\u003c/pre\u003e\u003cp\u003e\u003ccode\u003einput\u003c/code\u003e \u003ccode\u003etype\u003c/code\u003e有：\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003etext, color, password, radio, checkbox, file, hidden\u003c/li\u003e\n\u003cli\u003eradio, checkbox 用同一\u003ccode\u003ename\u003c/code\u003e group\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"5-其他感想\"\u003e5. 其他感想\u003c/h2\u003e\n\u003cp\u003e元素互相之间可能有关联，有reference, hierarchy等层级关系；属性选项也可能相似，要养成经常总结的习惯，并学会选取最合适的来应用。\u003c/p\u003e"
}
</script>

<link rel="preload" as="script" href="/blog/bundle.js?v=1598028633">


</head>
<body>

  <header id="nav" class="header">
  <div class="ax-l-i max-w-6xl">
    <div class="ax-logo">
      <a class="block" href="/blog/" title="Mia&#39;s Blog Posts"><span class="font-semibold text-raven-900">Mia's Blog Posts</span></a>
    </div>
    <div class="ax-user">
      <a class="p-2 w-8 h-8 block text-raven-500 hover:text-gray-800 focus:text-gray-800 focus:outline-none" target="_blank" rel="noopener nofollow" href="https://www.google.com/search?q=site:https://Mia-zhao.github.io/blog/" title="Search">
        <svg class="fill-current" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M2.67 12.804c0-5.6 4.544-10.134 10.133-10.134s10.134 4.544 10.134 10.134-4.544 10.133-10.134 10.133S2.67 18.393 2.67 12.804zm28.943 16.923l-8.868-8.868c4.287-5.3 3.68-13.012-1.378-17.57S8.564-1.066 3.75 3.75s-5.017 12.558-.46 17.618 12.28 5.665 17.57 1.378l8.868 8.868a1.33 1.33 0 0 0 2.231-.597c.123-.46-.008-.952-.345-1.29h0z"/></svg>

      </a>
    </div>
  </div>

  
</header>

  <main>
<div class="default-single">
  <div class="ax-title ax-l-o">
    <div class="ax-l-i max-w-680">
      <h1 class="post-title font-content-title font-normal leading-tight tracking-default text-40">HTML常用标签</h1>

      <div class="ax-meta flex items-center mt-5">
        <div class="flex-grow min-w-0">
          <div class="flex items-center">
  <div class="flex-shrink-0">
    <img
    class="w-12 h-12 sm:w-14 sm:h-14 object-cover p-3px rounded-full border border-blue-300"
    src="/blog/images/author/default.webp"
    alt="Mia Zhao">
  </div>
  <div class="flex-shrink-0 ml-2 leading-tight font-content-sans">
    <a class="block text-sm text-raven-800 hover:text-raven-900 hover:underline focus:underline" target="_blank" rel="noopener nofollow" title="Mia Zhao" href="https://Mia-zhao.github.io/blog/">Mia Zhao</a>
    <time class="text-sm text-raven-500" datetime="2020-08-03T13:00:00Z">Aug 3, 2020 9:00PM</time>
  </div>
</div>

        </div>
        <div>
          <div class="flex items-center">
  <a class="flex-shrink-0 block text-raven-800 hover:text-raven-900" target="_blank" rel="noopener nofollow" title="Share on Twitter" href="https://twitter.com/intent/tweet?text=HTML%e5%b8%b8%e7%94%a8%e6%a0%87%e7%ad%be%20by%20%40%25%21s%28%3cnil%3e%29%20https%3a%2f%2fMia-zhao.github.io%2fblog%2fposts%2fhtml%25E5%25B8%25B8%25E7%2594%25A8%25E6%25A0%2587%25E7%25AD%25BE%2f"><svg class="w-6 h-6 fill-current" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M32 6.078c-1.2.522-2.458.868-3.78 1.036 1.36-.812 2.398-2.088 2.886-3.626a13.11 13.11 0 0 1-4.16 1.588C25.742 3.794 24.026 3 22.154 3a6.56 6.56 0 0 0-6.556 6.562c0 .52.044 1.02.152 1.496-5.454-.266-10.28-2.88-13.522-6.862-.566.982-.898 2.106-.898 3.316a6.57 6.57 0 0 0 2.914 5.452 6.48 6.48 0 0 1-2.964-.808v.072c0 3.188 2.274 5.836 5.256 6.446-.534.146-1.116.216-1.72.216-.42 0-.844-.024-1.242-.112.85 2.598 3.262 4.508 6.13 4.57a13.18 13.18 0 0 1-8.134 2.798c-.538 0-1.054-.024-1.57-.1C2.906 27.93 6.35 29 10.064 29c12.072 0 18.672-10 18.672-18.668 0-.3-.01-.57-.024-.848C30.014 8.56 31.108 7.406 32 6.078z"/></svg>
</a>
  <a class="ml-3 flex-shrink-0 block text-raven-800 hover:text-raven-900" target="_blank" rel="noopener nofollow" title="Share on Facebook" href="https://www.facebook.com/dialog/share?app_id=&display=page&href=https%3a%2f%2fMia-zhao.github.io%2fblog%2fposts%2fhtml%25E5%25B8%25B8%25E7%2594%25A8%25E6%25A0%2587%25E7%25AD%25BE%2f"><svg class="w-6 h-6 fill-current" viewBox="-7 -3.5 39 39" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M30.234 0H1.765C.8.001 0 .79 0 1.766v28.47C.001 31.2.79 32 1.766 32h15.328V19.625h-4.156V14.78h4.156v-3.564c0-4.134 2.523-6.384 6.21-6.384 1.766 0 3.284.13 3.726.2v4.32h-2.543c-2.006 0-2.394.953-2.394 2.352v3.085h4.797l-.625 4.844h-4.172V32h8.14C31.21 32 32 31.2 32 30.234V1.765C32 .8 31.21 0 30.234 0z"/></svg>
</a>
</div>

        </div>
      </div>
    </div>
  </div>
  <div class="ax-feature ax-l-o">
    <div class="ax-l-i max-w-5xl">

<figure>
<img
class="mb-2 mx-auto leading-none shadow-xl"
src="/blog/images/Cover1.jpg"
alt="HTML常用标签">
</figure>

    </div>
  </div><div class="ax-content ax-l-o">
    <div class="ax-l-i max-w-680">
      <article class="cdata">
<p>这篇博文主要为了个人学习目的。此篇总结了HTML常用标签:</p>
<ol>
<li><code>a</code></li>
<li><code>img</code></li>
<li><code>table</code></li>
<li><code>form</code></li>
</ol>
<p><em>注意：应用网址浏览方式打开html文件，例如：利用工具http-server,parcel,etc.</em></p>
<h2 id="1-a标签">1. &lt;a&gt;标签</h2>
<h3 id="作用">作用</h3>
<p>又称anchor (锚)，用于创建超链接。按功能分，可以通向：</p>
<ul>
<li>同页面的其他元素</li>
<li>其他网页</li>
<li>文件</li>
<li>JavaScript</li>
<li>电子邮件/电话</li>
</ul>
<p>以上功能通过元素的<code>href</code>属性达成，例如：</p>
<pre><code>&lt;!-- example 1 链接通向同页面的id=&quot;hey&quot;的p元素 --&gt;
&lt;p id=&quot;hey&quot;&gt;
&lt;a href=&quot;#hey&quot;&gt;example 1&lt;/a&gt;

&lt;!-- example 2 链接通向无协议的google.com, https://google.com或者http://google.com也是合法值--&gt;
&lt;a href=&quot;//google.com&quot;&gt;example 2&lt;/a&gt;

&lt;!-- example 3 链接通向文件路径, &quot;subdir1/subdir2&quot;等效，也可以是&quot;index.html&quot;, &quot;./index.html&quot;等效 --&gt;
&lt;a href=&quot;/subdir1/subdir2&quot;&gt;example 3&lt;/a&gt;

&lt;!-- example 4 链接运行javascript代码&lt;code&gt;部分，如果是空则什么都不做 (不需要刷新的时候用) --&gt;
&lt;a href=&quot;javascript:&lt;code&gt;;&quot;&gt;example 4&lt;/a&gt;

&lt;!-- example 5 链接发送邮件，&quot;tel:110&quot;则拨电话 --&gt;
&lt;a href=&quot;mailto:abc@example.com&quot;&gt;example 5&lt;/a&gt;
</code></pre><h3 id="target属性"><code>target</code>属性</h3>
<p>默认值是<code>_self</code>, 表明链接在<code>&lt;a&gt;</code>所在窗口打开。其他值包括：</p>
<ul>
<li><code>_blank</code>: 在新窗口打开，在新tab或是window打开取决于浏览器设置</li>
<li><code>_parent</code>: 在<code>&lt;a&gt;</code>的父级元素环境打开，若无父级元素，效果等同<code>_self</code></li>
<li><code>_top</code>: 在<code>&lt;a&gt;</code>的最高祖先级元素环境打开，若无，则等同<code>_self</code></li>
<li><code>&quot;some_value&quot;</code>: 任意String。若<code>&quot;some_value&quot;</code>窗口已存在，则在其窗口打开；否则新建一个<code>&quot;some_value&quot;</code>窗口并在此打开链接</li>
</ul>
<h3 id="download属性"><code>download</code>属性</h3>
<p>指示浏览器下载，可以有值或者没有值：</p>
<ul>
<li>有值：作为下载文件名</li>
<li>无值：浏览器提出文件名</li>
</ul>
<h3 id="rel属性"><code>rel</code>属性</h3>
<p>代表链接对象的关系，用空格分隔的<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types">Link Type</a>表示</p>
<h2 id="2-img标签">2. &lt;img&gt;标签</h2>
<p>关键词：<em>get request</em>, <em>alt</em>, <em>src</em>, <em>响应式</em><br>
<br>
<code>&lt;img&gt;</code>的功能是将图片嵌入在文本里。以下是重要属性：</p>
<ul>
<li><code>src</code>: 必须有的，提供图片路径</li>
<li><code>alt</code>: 提供图片文本描述，不是强制属性但是有用且建议。若图片加载失败，此属性能提供具体图片信息</li>
<li><code>height</code>/<code>width</code>: 提供任意一个，另一个相适应</li>
</ul>
<p>重要事件：</p>
<ul>
<li><code>onload</code>: 加载成功事件</li>
<li><code>onerror</code>: 加载失败事件，在此加error handling</li>
</ul>
<p>重要样式：</p>
<ul>
<li>响应式(电脑，移动设备屏等)用 <code>max-width: 100%</code>
以下是用法：</li>
</ul>
<pre><code>&lt;!-- 用法一：style  --&gt;
&lt;style&gt;
  img {
      max-width: 100%;
  }
&lt;/style&gt;

&lt;!-- 用法二：sizes  --&gt;
&lt;img src=&quot;/path/to/image&quot; alt=&quot;description&quot; sizes=&quot;(max-width: 100%)&quot; &gt;
</code></pre><h2 id="3-table标签">3. &lt;table&gt;标签</h2>
<p><code>table</code>结构：</p>
<ul>
<li><code>&lt;thead&gt;</code>/<code>&lt;tbody&gt;</code>/<code>&lt;tfoot&gt;</code>
<ul>
<li><code>&lt;tr&gt;</code> (row)
<ul>
<li><code>&lt;th&gt;</code></li>
<li><code>&lt;td&gt;</code></li>
</ul>
</li>
</ul>
</li>
</ul>
<p><code>table</code>样式：</p>
<ul>
<li><code>table-layout</code>
<ul>
<li><code>&quot;auto&quot;</code></li>
<li><code>&quot;fixed&quot;</code></li>
</ul>
</li>
<li><code>border-collapse</code></li>
<li><code>border-spacing</code></li>
</ul>
<h2 id="4-form标签">4. &lt;form&gt;标签</h2>
<p>关键词：<em>get/post</em>, <em>action</em>, <em>onsubmit</em>, <em>input</em><br>
<br>
<code>&lt;form&gt;</code>表示用来提交信息的交互式控制组件。重要属性包括：</p>
<ul>
<li><code>action</code>: 处理提交的URL (后端)</li>
<li><code>method</code>: (不区分大小写)
<ul>
<li><code>&quot;POST&quot;</code>: 数据通过<a href="https://developer.mozilla.org/en-US/docs/Web/API/Body">request body</a>发送</li>
<li><code>&quot;GET&quot;</code>: 数据附加在<code>action</code>URL中</li>
<li><code>&quot;DIALOG&quot;</code>: 在<code>&lt;dialog&gt;</code>中提交表示关闭对话框</li>
</ul>
</li>
<li><code>autocomplete</code> (<code>&quot;on&quot;</code>/<code>&quot;off&quot;</code>)</li>
<li><code>target</code>: 同<code>&lt;a&gt;</code>的<code>target</code>属性</li>
</ul>
<p>重要事件：</p>
<ul>
<li><code>onsubmit</code></li>
</ul>
<p><strong>注意</strong>:</p>
<ul>
<li><code>&lt;form&gt;</code>包含<code>input</code>/<code>button</code></li>
<li><code>&lt;form&gt;</code>里必须有一个<code>type</code> <code>&quot;submit&quot;</code>, 如果<code>type</code>没有标明，默认为<code>&quot;submit&quot;</code></li>
<li><code>input</code> (<code>type=&quot;submit&quot;</code>) vs <code>button</code> (<code>type=&quot;submit&quot;</code>)
<ul>
<li><code>button</code>可以用标签包裹内容, <code>input</code>不可以</li>
</ul>
</li>
</ul>
<p>一个<code>&lt;form&gt;</code>例子：</p>
<pre><code>&lt;!-- 自动补全功能只有input name存在时才有用 --&gt;
&lt;form action=&quot;&quot; method=&quot;POST&quot; autocomplete=&quot;on&quot;&gt;
  &lt;input name=&quot;username&quot; type=&quot;text&quot;/&gt;
  &lt;input type=&quot;submit&quot; /&gt;
&lt;/form&gt;
</code></pre><p><code>input</code> <code>type</code>有：</p>
<ul>
<li>text, color, password, radio, checkbox, file, hidden</li>
<li>radio, checkbox 用同一<code>name</code> group</li>
</ul>
<h2 id="5-其他感想">5. 其他感想</h2>
<p>元素互相之间可能有关联，有reference, hierarchy等层级关系；属性选项也可能相似，要养成经常总结的习惯，并学会选取最合适的来应用。</p>

      </article>
      

      

    </div>
  </div>
</div>

  </main>
  <footer class="footer">
  <div class="ax-l-i max-w-6xl">
    <nav class="flex items-center justify-center">
    </nav>

    <div class="footer-copyright text-sm text-center text-gray-500 mt-4">
      &#169; -2020 Mia&#39;s Blog Posts
    </div>
    <div class="text-sm sm:text-xs text-center text-gray-500 mt-2">
      Powered by <a href="https://www.axiomtheme.com/?utm_source=theme-footer&utm_medium=website&utm_campaign=referral">Axiom</a>
    </div>
  </div>
</footer>

<script src="/blog/bundle.js?v=1598028633"></script>


</body>
</html>
